<template>
  <div class="searchAll">

    <div class="header-bar-box">
      <div class="header-bar clear">
        <img src="../../assets/search/a2.png" alt="" class="ico1">
        <input type="text" class="search" id="search" placeholder="搜索" v-model="keyword" @blur="searchInput" @keyup.13="searchInput">
        <img src="../../assets/search/delete.png" alt="" class="delete" @click="clearInput">
      </div>
    </div>


    <div class="box searchUser"  v-if="haveCustomerList">
      <div class="title">用户</div>

      <ul>
        <li class="clearFix user" v-for="item in customerList" @click="gotoAddress('/otherIndex?id='+item.customer_id)">
          <!--v-on:click="gotoAddress('/users/other/'+item.customer_id)"-->
          <img class="icon fl" :src="'http://api.piver.cn/image/users/'+item.customer_id+'.jpg'"/>
          <p class="name fl">{{item.name}}</p>
        </li>
      </ul>
      <div class="next-btn" >
        <!--v-if="customerList.length =='3'"-->
        <div class="more"  @click="gotoCustomer">查看更多用户></div>
      </div>
    </div>

    <div class="box" v-if="haveProductList">
      <div class="title">商品</div>
      <ul class="article-result" >
        <li class="clearfix shop" v-for="item in productList" v-on:click="gotoAddress('/shop/details/'+item.product_id)" >
          <img class="icon fl" :src="item.image" v-if="item.image!=null"/>
          <img class="icon fl" src="../../assets/default.png" v-if="item.image==null"/>
          <div class="goods fl">
            <p><span v-if="item.product_cs">【{{item.product_cs}}】</span>{{item.product_name}}</p>
            <p>￥{{item.price}}</p>
          </div>

        </li>
      </ul>
      <div class="next-btn">
        <!-- v-if="productList.length == '3'"-->
        <div class="more"  @click="gotoProduct">
          查看更多商品>
        </div>
      </div>
    </div>

    <div class="box" v-if="haveArticleList">
      <div class="title">文章</div>
        <ul class="article-result" >
          <li class="clearfix article" v-for="item in articleList" v-on:click="gotoAddress('/content/article/'+item.article_id)" >
            <div class="fl" >
              <!--<img :src="item.cover ||'https://dummyimage.com/100x100' " alt="" >-->
              <img v-if="item.cover!=null" :src="item.cover" :onerror="logo" alt="" />
              <img v-if="item.cover==null" src="../../assets/default.png" alt="" />

            </div>
            <div class="fr">
              <div class="ms">{{item.subject}}</div>
              <!---->
              <div class="time-box">
                <span class="time">{{item.date_added}}</span>
                <!--<img src="../../assets/search/a3.png" class="follow" alt="" /><i>{{item.liketimes}}</i>-->
                <img src="../../assets/search/a4.png" class="pinglun" alt="" /><i>{{item.commenttimes}}</i>
              </div>
            </div>
          </li>
        </ul>
        <div class="next-btn"  >
          <!--v-if="articleList.length=='3' "-->
          <div class="more" @click="gotoArticle">
            查看更多文章>
          </div>
        </div>


    </div>






    <div class="no-result" v-if="!haveArticleList && !haveProductList && !haveCustomerList">
      <!--style="display: none"-->
      <div class="no">
        <img src="../../assets/search/a5.png" alt="" />
      </div>
      <div class="no-text">没有相关信息</div>
    </div>

  </div>
</template>

<script>
  import {Toast} from "mint-ui"
  export default {
    name: 'SearchAll',
    data () {
      return {
        haveArticleList:false,
        haveProductList:false,
        haveCustomerList:false,
        articleList:[],
        productList:[],
        customerList:[],
        keyword:'',
        logo: 'this.src="' + require('../../assets/default.png') + '"'
      }
    },
    mounted:function() {
      this.keyword=this.$route.query.keyword;
      var a =this.$route.query.keyword;
      this.initData(a);
//      var _this = this;
//      $('body').on('blur','#search',function(){
//
//        if($('#search').val() == ''){
//          return;
//        }
//
//        var key = $(this).val();
//        _this.initData(key);
//
//      })




    },
    methods: {
      initData:function(keywd){
        var _this = this;
        this.haveArticleList = false;
        this.haveProductList = false;
        this.haveCustomerList = false;
        this.keyword = keywd;
        var ajaxData = {};
        ajaxData.keyword = keywd;
        ajaxData.limit=3;
        $.ajax({
          type:'post',
          url: RouteMap.searchAll,
          data:ajaxData,
          success:function(res){
            if(res.code == 200){

              _this.articleList = res.data.articleList.list;
              _this.productList = res.data.productList.list;
              _this.customerList = res.data.customerList.list;
//              console.log(res.data.customerList);
              if(_this.articleList.length>0){
                _this.haveArticleList = true;
              }
              if(_this.productList.length>0){
                _this.haveProductList = true;
              }
              if(_this.customerList.length>0){
                _this.haveCustomerList = true;
              }
//              else{
//                $('.no-result').show();
//              }
            }
            else{
              //Toast(res.msg)
            }
          }
        })
      },
      clearInput(){
        this.keyword='';
        this.haveArticleList=false;
        this.haveProductList=false;
        this.haveCustomerList=false;
      },
      searchInput(){
        if(this.keyword==''){
          return;
        }
        var key = this.keyword;
        this.initData(key);
        this.$router.push({path:'/search/search-all?keyword='+ key});
      },
      gotoAddress(path){
        this.$router.push(path)
      },
      gotoArticle:function(){
        this.$router.push({path:'/search/article?keyword='+this.keyword+'&type=article'})
      },
      gotoProduct:function(){
        this.$router.push({path:'/search/shop?keyword='+this.keyword+'&type=product'})
      },
      gotoCustomer:function(){
        this.$router.push({path:'/search/user?keyword='+this.keyword+'&type=customer'})
      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .searchAll{
    color:#707070;
  }

  .header-bar-box{
    border-bottom: 1px solid #eee;
  }
  .header-bar{ margin: .33rem 1rem;
    background: #f5f5f5;
    border-radius: 1rem;
    padding: 0.05rem;
    /*border-bottom: 1px solid #1c1c1c;*/
  }
  .header-bar .search{ width: 11.2rem; padding-left: .2rem; font-size: 0.6rem;}
  .header-bar .ico1{ width: 0.65rem; margin-left: 0.4rem; }
  .header-bar .delete{ width: 0.7rem; display: -none;}
  .header-bar img,.header-bar input{
    vertical-align: middle;
  }

.more{
  font-size:.6rem;
  text-align: right;
}

  .searchAll{background:#fff; padding-top: 0.5rem;}


  .article{
    padding: 0.4rem 0.3rem;
    border-bottom: 1px solid #eee;
  }
  .article .fl{
    width: 5rem;

  }
  .article .fl img{
    width: 100%;
  }
  .article .fr{
    width: 8.8rem;
    height: 3.5rem;
    font-size: 0.6rem;
  }
  .article .fr .ms{
    margin-top: 0.5rem;
    font-size: .6rem;
  }
  .time-box{
    margin-top: 0.7rem;
    font-size: .4rem;
  }
  .time-box span,.time-box i,.time-box img{
    vertical-align: middle;
  }
  .time-box .time{
    width: 6.8rem;
    display: inline-block;
  }
  .time-box .follow{
    display: inline-block;
    width: 0.6rem;
    margin-right: 0.2rem;
  }
  .time-box .pinglun{
    display: inline-block;
    width: 0.5rem;
    margin-right: 0.2rem;
    margin-left: 0.2rem;
  }
  /*.next-btn{*/
    /*padding: 0 0.5rem;*/
    /*padding-bottom: 2rem;*/
    /*margin-top: 1rem;*/
  /*}*/
  .no-result{
    text-align: center;
    color: #dedede;
    font-size: 0.5rem;
    padding: 6rem 0;
  }
  .no-result .no img{
    width: 2rem;
    padding-bottom: .5rem;
  }
  .next-btn{
    padding: 0 0.5rem;
    margin-top: .3rem;

  }
  .box .title{
    border-bottom: 1px solid #eee;
    padding: 0.4rem 0.5rem;
    font-size:.65rem;
    color: #b01f24;
  }
  .box{
    padding:0 .5rem 1rem;
  }
  .shop{
    width:100%;
    box-sizing:border-box;
    padding:.4rem 0 .4rem .5rem;
    border-bottom: 1px solid #eee;
  }
  .shop .icon{
    width:2.5rem;
    /*height:3rem;*/

  }
  .shop .goods{
    line-height:1.2rem;
    padding-left:.7rem;
    width:10rem;
    font-size: .6rem;
  }

  .user{
    width:100%;
    box-sizing:border-box;
    padding:.5rem 0 .5rem .5rem;
    border-bottom: 1px solid #eee;
  }
  .user .icon{
    border-radius: 50%;
    width:1.5rem;
    height:1.5rem;

  }
  .user .name{
    line-height:1.5rem;
    padding-left:.5rem;
  }

</style>
